import 'package:flutter/material.dart';
import 'package:todo_app/layout/Gaps.dart';

import '../constants/Screen.dart';

class CustomTabs extends StatefulWidget {
  final TabItemWidgetBuilder builder;
  final List data;
  final double itemWidth;
  final double itemHeight;
  final int index;
  const CustomTabs({ Key? key, required this.index, required this.builder, required this.data, required this.itemWidth, required this.itemHeight }) : super(key: key);

  @override
  _CustomTabsState createState() => _CustomTabsState();
}

typedef Widget TabItemWidgetBuilder(BuildContext context, dynamic item);

class _CustomTabsState extends State<CustomTabs> {

  _CustomTabsState();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Stack(
          children: [
            AnimatedPositioned(
              duration: const Duration(milliseconds: 250),
              bottom: 8.dp,
              left: widget.itemWidth / 2 + widget.index * widget.itemWidth - Screen.sizeByDesign(72) / 2,
              child: Container(
                color: Colors.yellow[600],
                height: Screen.sizeByDesign(18),
                width: Screen.sizeByDesign(72),
              )
            ),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: widget.data.map<Widget>((e) => SizedBox(
                width: widget.itemWidth,
                height: widget.itemHeight,
                child: widget.builder(context, e),
              )).toList()
            ),
          ],
        ),
      ),
    );
  }
}